<example name="Select-ng">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <rg-select ng-model="ctrl.selectedItem"
        options="item.text for item in ctrl.options track by item.id"
        label="Select item" ng-disabled="ctrl.disabled"></rg-select>
      <div>Selected item: {{ctrl.selectedItem | json}}</div>
      <div>
        <button ng-click="ctrl.disabled = true">Disable</button>
        <button ng-click="ctrl.disabled = false">Enable</button>
      </div>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).controller('testCtrl', function () {
      var ctrl = this;

      ctrl.options = [
        {id: 1, text: '11111'},
        {id: 2, text: '22222'},
        {id: 3, text: '33333'}
      ];

      ctrl.selectedItem = ctrl.options[1];
    });
  </file>
</example>

<example name="Select-ng-in-rg-tabs">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <rg-tabs>
        <rg-tabs-pane x-title="With select">
          <div>tab 1</div>
          <rg-select ng-model="ctrl.selectedItem" config="ctrl.selectConfig"
            options="item.text for item in ctrl.options track by item.id"
            label="Select item"></rg-select>
        </rg-tabs-pane>
        <rg-tabs-pane x-title="Another tab" counter="7">Tab 2</rg-tabs-pane>
      </rg-tabs>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
    import 'angular-route';
    import TabsNG from '@jetbrains/ring-ui/components/tabs-ng/tabs-ng';

    angular.module('test', [SelectNG, TabsNG]).
      controller('testCtrl', function () {
        var ctrl = this;

        ctrl.options = [
          {id: 1, text: '11111'},
          {id: 2, text: '22222'},
          {id: 3, text: '33333'}
        ];

        ctrl.selectConfig = {};

        ctrl.selectedItem = ctrl.options[1];
      });
  </file>
</example>

<example name="Select-ng-as-input">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <rg-select ng-model="ctrl.selectedItem"
        options="item.text for item in ctrl.options track by item.id"
        label="Select item" ng-disabled="ctrl.disabled"
        type="input"></rg-select>
      <div>Selected item: {{ctrl.selectedItem | json}}</div>
      <div>
        <button ng-click="ctrl.disabled = true">Disable</button>
        <button ng-click="ctrl.disabled = false">Enable</button>
      </div>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).controller('testCtrl', function () {
      var ctrl = this;

      ctrl.options = [
        {id: 1, text: '11111'},
        {id: 2, text: '22222'},
        {id: 3, text: '33333'}
      ];

      ctrl.selectedItem = ctrl.options[1];
    });
  </file>
</example>

<example name="Select-ng-as-model">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <rg-select ng-model="ctrl.selectedItem"
        options="item.id as item.text for item in ctrl.options track by item.id"
        label="Select item" ng-disabled="ctrl.disabled"></rg-select>
      <div>Selected item: {{ctrl.selectedItem}}</div>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).controller('testCtrl', function () {
      var ctrl = this;

      ctrl.options = [
        {id: 1, text: '11111'},
        {id: 2, text: '22222'},
        {id: 3, text: '33333'}
      ];

      ctrl.selectedItem = ctrl.options[1].id;
    });
  </file>
</example>

<example name="Select-ng-as-model-lazy">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <p>Be carefully using <b>lazy=false</b> may significantly decrease your
        performance</p>
      <p>This case describe when we take from server ng-model and then
        asynchronous take options for this model</p>

      <rg-select
        ng-model="ctrl.selectedItem"
        lazy="false"
        options="item.id as item.text for item in ctrl.options track by item.id"></rg-select>
      <div>Selected item: {{ctrl.selectedItem}}</div>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).
      controller('testCtrl', function ($timeout) {
        var ctrl = this;

        ctrl.selectedItem = 2

        $timeout(function () {
          ctrl.options = [
            {id: 1, text: '11111'},
            {id: 2, text: '22222'},
            {id: 3, text: '33333'}
          ];
        }, 1000);

      });
  </file>
</example>

<example name="Select-ng-promise">
  <file type="html" disable-auto-size>
    <h4>Getting items from promise on click with external filtering. (Filter
      value should be equal to label, not just part)</h4>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <rg-select ng-model="ctrl.selectedItem"
        options="item in ctrl.getItems(query)" label="Select item"
        external-filter="true" loading-message="Hey! I'm loading!"></rg-select>
      <div>Selected item: {{ctrl.selectedItem | json}}</div>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).
      controller('testCtrl', function ($timeout, $q) {
        var ctrl = this;

        ctrl.options = [
          {key: 1, label: '1'},
          {key: 2, label: '2'},
          {key: 3, label: '3'},
          {key: 4, label: '4'},
          {key: 5, label: '5'}
        ];

        ctrl.selectedItem = ctrl.options[1];

        ctrl.getItems = function (query) {
          var defer = $q.defer();
          $timeout(function () {
            defer.resolve(ctrl.options.filter(function (op) {
              return query ? op.label === query : true;
            }));
          }, 1000 * Math.random());
          return defer.promise;
        };
      });
  </file>
</example>

<example name="Select-ng-dropdown">
  <file type="html" disable-auto-size>
    <h4>Select-ng as dropdown</h4>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <button rg-select options="item in ctrl.options" select-type="dropdown"
        on-change="ctrl.onSelect(selected)">Click Me
        &#9660;</button>
      <ol>
        <li ng-repeat="click in ctrl.clicks track by $index">{{click.label}}
        </li>
      </ol>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).controller('testCtrl', function () {
      var ctrl = this;

      ctrl.clicks = [];

      ctrl.options = [
        {key: 1, label: '11111'},
        {key: 2, label: '22222'},
        {key: 3, label: '33333'}
      ];

      ctrl.onSelect = function (item) {
        ctrl.clicks.push(item);
      };

    });
  </file>
</example>

<example name="Select-ng-inside-dialog">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <div>
        <h1>Text content to make scroll</h1>
        <div id="textContent"></div>
        <rg-dialog></rg-dialog>
      </div>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
    import DialogNG from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';

    function fillScrollableContent() {
      var html = '<h2>Text to scroll</h2>';
      for (var i = 0; i < 100; i++) {
        html += 'Text<br/>'
      }
      document.getElementById('textContent').innerHTML = html;
    }

    fillScrollableContent();

    angular.module('test', [SelectNG, DialogNG])
    .run(function($templateCache) {
      var tpl = '<rg-select ng-model="data.selectedItem" options="item in data.getOptions()"></rg-select>';
      $templateCache.put('test-tpl.html', tpl);
    })
    .controller('testCtrl', function($timeout, dialog) {
    var data = {
      getOptions: () => {
        return $timeout(function() {
          return [
            {key: 1, label: '11111'},
            {key: 2, label: '22222'}
          ];
        }, 1000);
      }
    }

    $timeout(function(){
      dialog.show({
        title: 'Select in dialog demo',
        description: 'Select popup should not scroll with background page content',
        data: data,
        content: 'test-tpl.html'
      });
      }, 100);
    });
  </file>
</example>

<example name="Select-ng-multiple">
  <file type="html" disable-auto-size>
    <h4>Multiple select</h4>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <rg-select ng-model="ctrl.selectedItems" options="item in ctrl.options"
        label="Select item" multiple="ctrl.multiple"></rg-select>
      <div>Selected items: {{ctrl.selectedItems | json}}</div>
      <button ng-click="ctrl.selectedItems.splice(0, 1)">Deselect first item
      </button>
      <button ng-click="ctrl.options.splice(0, 1)">Remove first option</button>
      <button ng-click="ctrl.multiple = !ctrl.multiple">Toggle multiple</button>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).controller('testCtrl', function () {
      var ctrl = this;
      ctrl.multiple = true;

      ctrl.options = [
        {key: 1, label: '11111'},
        {key: 2, label: '22222'},
        {key: 3, label: '33333'},
        {key: 4, label: '4444444'},
        {key: 5, label: '5555'}
      ];

      ctrl.selectedItems = [ctrl.options[1], ctrl.options[2]];
    });
  </file>
</example>
<example name="Select-ng-form">
  <file type="html" disable-auto-size>
    <h4>Form with validation</h4>

    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <form name="testForm" class="ring-form ring-form_border" novalidate>
        <div class="ring-form__wrap">
          <div class="ring-form__control">
            <label class="ring-form__label" translate>Required item:</label>
            <rg-select ng-model="ctrl.item1"
              options="item as item for item in ctrl.options"
              label="Select item" required name="requiredSelect"></rg-select>

            <div class="installer-form__error-hint ring-error-bubble active"
              ng-if="testForm.requiredSelect.$invalid">
              Error {{testForm.requiredSelect.$error}}
            </div>
          </div>
          <button ng-disabled="testForm.$invalid">Submit</button>
        </div>
        <div>Errors: {{testForm.$error}}</div>
      </form>
    </div>

  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
    import FormNG from '@jetbrains/ring-ui/components/form-ng/form-ng';

    angular.module('test', [SelectNG, FormNG]).
      controller('testCtrl', function () {
        var ctrl = this;

        //It is not required to use array of strings. Just for example
        ctrl.options = ['1', '22', '333', '4444'];

        ctrl.selectedItem = null;
      });
  </file>
</example>
<example name="Select-ng-load-more-on-scroll">
  <file type="html" disable-auto-size>
    <h4>Load more elements on scroll</h4>

    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <rg-select ng-model="ctrl.selectedItem"
        external-filter="true"
        with-infinite-scroll="true"
        infinite-scroll-pack-size="20"
        options="item as item for item in ctrl.getOptions(skip, query)"></rg-select>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';
    import FormNG from '@jetbrains/ring-ui/components/form-ng/form-ng';

    angular.module('test', [SelectNG, FormNG]).
      controller('testCtrl', function ($q, $timeout) {
        var ctrl = this;
        var PAGE_SIZE = 20;

        // Result array is increasing after each method call
        ctrl.getOptions = function (skip, query) {
          console.log('query = ', query, 'skip = ', skip);
          var arr = [];
          if (skip < 50) {
            for (var i = 0; i < PAGE_SIZE; ++i) {
              var labelText = (skip + '-' + i) + '';
              if (query) {
                labelText = query + ' ' + labelText;
              }
              arr.push(labelText);
            }
            if (skip === 0) {
              arr.unshift('Unexpected option at the beginning');
            }
          }
          var defer = $q.defer();
          // Timeout is needed to demonstrate loader in rg-select
          $timeout(function () {
            defer.resolve(arr);
          }, 1000);
          return defer.promise;
        };
        ctrl.selectedItem = null;
      });
  </file>
</example>

<example name="Select-ng performance">
  <file type="html" disable-auto-size>
    <div ng-app="test" ng-strict-di ng-controller="testCtrl as ctrl">
      <div style="padding: 8px">
        <button type="button" ng-click="ctrl.renderSelects()">Render</button>
        <button type="button" ng-click="ctrl.selects = []">Remove</button>

        <span style="color: gray;">
          Last render time: <span ng-bind="ctrl.renderTime"></span>
          | selects counts {{ctrl.selects.length || 0}}
        </span>
      </div>

      <rg-select ng-repeat="selectId in ctrl.selects"
        ng-model="ctrl.selectedItem"
        options="item.text for item in ctrl.options track by item.id"
        label="Select item" ng-disabled="ctrl.disabled">
      </rg-select>
    </div>
  </file>
  <file type="js">
    import angular from 'angular';
    import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

    angular.module('test', [SelectNG]).
      controller('testCtrl', function ($timeout) {
        var ctrl = this;
        ctrl.renderTime = null;

        ctrl.options = [
          {id: 1, text: '11111'},
          {id: 2, text: '22222'},
          {id: 3, text: '33333'}
        ];

        ctrl.renderSelects = function () {
          var date = Date.now();
          var selectsCount = 1000;

          ctrl.selects = (new Array(selectsCount)).join('x').
            split('x').
            map(function (id) {
              return {
                id: id
              };
            });

          $timeout(function () {
            ctrl.renderTime = (Date.now() - date) / 1000 + ' s';
          }, 16);
        };
      });
  </file>
</example>
